<template>
	<view>
		<view class="fl-box">
			<!-- <view class="gl"></view> -->
			<!-- <view class="box1">
				<template>
					<u-search action-text="取消" v-model="keyword" @change="change" placeholder-color="#bbb" :clearabled="true" show-action @custom="custom"></u-search>
				</template>
			</view> -->
			<!-- 搜索 -->
			<view class="white">
				<view class="search common">
					<!-- 搜索 -->
					<u-search
						action-text="取消"
						placeholder-color="#bbb"
						placeholder="520元红包抢先领"
						:clearabled="true"
						show-action
						shape="square"
						@search="search"
						v-model="keyword"
						@input="inp"
					></u-search>
					<view class="postxt" @tap="none"></view>
				</view>
				<!--  -->
				<view class="" v-if="!isShowsearch">
					<view class="posblack">
						<view class="item" v-for="(item, index) in list2" :key="index" @tap="pushSearch(item)">
							<text>{{ item }}</text>
						</view>
					</view>
					<view class="nomore">没有更多了</view>
				</view>
			</view>

			<!-- 1.输入切换 -->
			<!-- 产品渲染 -->
			<view class="" v-if="isShowsearch">
				<view class="dropdown">
					<fy-dropdown :menuList="menuList" active-color="#f40">
						<fy-dropdown-item v-model="synthesisValue" dropdownKey="synthesis" :options="columnOptions" type="column" @change="handlerColumnChange"></fy-dropdown-item>
						<fy-dropdown-item v-model="priceValue" dropdownKey="price" :options="priceOptions" @change="handlerTypeChange"></fy-dropdown-item>
						<fy-dropdown-item v-model="salesValue" dropdownKey="sales" :options="salesOptions"></fy-dropdown-item>
					</fy-dropdown>
				</view>
				<!-- 输入显示选择列表 -->
				<view class="fen-box" v-if="iskeyword">
					<view class="xq" v-for="(item, index) in list" :key="index" @tap="pushDetail(item.id)">
						<image :src="item.list_pic_url" mode="widthFix"></image>
						<view class="bt">{{ item.name }}</view>
						<view class="jg">￥ {{ item.retail_price }} 元</view>
					</view>
				</view>
				<!-- 输入的请求为空 -->
				<!-- <view class="" v-else><u-empty mode="list" text="暂无商品" iconSize="120" iconColor="#ccc"></u-empty></view> -->
				<view class="" v-else>
					<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" text="暂无商品" iconSize="140" textSize="18" iconColor="#ccc"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let timer = null;
import { goodsApi2, helperApi } from '../../utils/api.js';
export default {
	data() {
		return {
			list: [],
			keyword: '日式',
			iskeyword: 'true',
			menuList: [{ title: '综合', dropdownKey: 'synthesis', disabled: true }, { title: '价格', dropdownKey: 'price' }, { title: '分类', dropdownKey: 'sales' }],
			synthesisValue: '',
			columnOptions: [
				{ title: '任务类型', key: 'type', default: '', list: [{ text: '全部', value: '' }, { text: '类型1', value: '2' }, { text: '类型2', value: '1' }] },
				{ title: '任务状态', key: 'status', default: '', list: [{ text: '全部', value: '' }, { text: '已完结', value: '1' }, { text: '工作中', value: '2' }] }
			],
			priceValue: '',
			priceOptions: [{ label: '价格由高到底', value: 'desc' }, { label: '价格由低到高', value: 'asc' }],
			salesValue: '',
			salesOptions: [{ label: '全部', value: 1 }, { label: '居家', value: 2 }],

			list2: [],
			isShowsearch: false,
			isShowMore: false,
			num: 1
		};
	},

	onShow() {
		// categoryId=0&page=1&size=20&keyword=日式&sort=id&order=desc
		this.getList();
	},

	onLoad(e) {
		this.keyword = e.keyword;
	},
	methods: {
		handlerColumnChange(e) {
			if (e.cancel) return;
			this.columnOptions.forEach(item => {
				item.default = e.data[item.key];
			});
		},
		handlerTypeChange(e) {
			// if (e == 1) {
			// 	this.list = this.list.sort(function(a, b) {
			// 		return b.retail_price - a.retail_price;
			// 	});
			// } else {
			// 	this.list = this.list.sort(function(a, b) {
			// 		return a.retail_price - b.retail_price;
			// 	});
			// }
			console.log(e);
			this.getList();
		},
		custom() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		change(e) {
			if (!e) {
				this.list = [];
			}
		},
		async getList() {
			this.isShowsearch = true;
			if (!this.keyword) {
				this.iskeyword = false;
			}
			let goodsApi2res = await goodsApi2(this.keyword, this.priceValue || 'desc');
			// 价格排序

			// this.list = goodsApi2res.data.data.sort(function(a, b) {
			// 	return a.retail_price - b.retail_price;
			// });
			this.list = goodsApi2res.data.data;
			if (this.list.length == 0) {
				this.iskeyword = false;
			}
		},

		pushDetail(id) {
			uni.navigateTo({
				url: `/pages/myDetail/myDetail?id=${id}`
			});
		},

		none() {
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		pushSearch(item) {
			if (item) {
				this.keyword = item;
			}
			uni.navigateTo({
				url: `/pages/searchList/searchList?keyword=${this.keyword}`
			});
			// if (!this.isShowsearch) {
			this.isShowsearch = false;
			// }
		},
		inp() {
			if (this.num != 1) {
				console.log('111', this.isShowMore);
				this.isShowsearch = false;
				// if (this.isShowsearch) {
				// 	this.isShowsearch = false;
				// }
				console.log(this.keyword);
				// 先取消上一次 等等延迟后再请求
				clearTimeout(timer);
				timer = setTimeout(() => {
					this.getSearch();
				}, 500);
			}
			this.num++;
		},
		async getSearch() {
			let token = uni.getStorageSync('token');
			let res = await helperApi(token, this.keyword);
			console.log(res);

			this.list2 = res.data;
		}
	}
};
</script>

<style lang="less">
.nomore {
	padding: 30rpx 0;
	border: 0;
	font-size: 34rpx;
	color: #777;
	text-align: center;
}
.posblack {
	background-color: #ffffff;
	.item {
		display: flex;
		box-sizing: border-box;
		width: 90%;
		padding: 20rpx 0px;
		margin: 0 32rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
		box-sizing: border-box;
	}
	.item:last-child {
		border-bottom: none;
	}
}

.postxt {
	// background-color: #ccc;
	width: 90rpx;
	height: 70rpx;
	position: absolute;
	right: 30rpx;
	top: 30rpx;
}

.white {
	background-color: #fff;

	.search {
		margin: 0rpx 20rpx 0;
		padding: 26rpx 0;
		position: relative;
		z-index: 1;
	}
}

.box1 {
	margin: 0rpx 20rpx 0;
	padding: 26rpx 0;
	position: relative;
	z-index: 1;
}

.fl-box {
	.gl {
		height: 100rpx;
	}

	.fen-box {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;

		.xq {
			width: 49%;
			text-align: center;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			image {
				width: 100%;
			}

			.bt {
				font-size: 28rpx;
				color: #333;
			}

			.jg {
				font-size: 28rpx;
				margin-top: 5px;
				color: darkred;
			}
		}
	}
}
</style>
